<template>
	<el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" size="1100px" :close-on-click-modal="isReadOnly">
		<template #header="{ titleId, titleClass }">
			<div class="zs-drawer-header" :id="titleId" :class="titleClass">
				<i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
				<div class="zs-title zs-text-black">{{ reportName || currentRow?.reportName }}</div>
			</div>
		</template>

		<template #default>
			<el-container class="zs-drawer-container">
				<div class="zs-drawer-content-whole zs-layout-flex-col overflow-auto">
					<div class="top-box zs-layout-flex-row zs-layout-justify-between zs-space-bottom">
						<span class="zs-text-gray">单位：亿元</span>
						<span class="zs-text-gray">{{ topRightTxt }}：{{ stopDate }}</span>
					</div>
					<div class="zs-layout-flex-row zs-space-bottom-bg">
						<div class="zs-full-item">
							<remixTable ref="refTable" :loading="loading" :isReadOnly="isReadOnly" :handleType="handleType" :currentRow="currentRow" :tableHeaderList="tableHeaderList" :noFormatColNumList="noFormatColNumList" :rowClassName="rowClassName" :objectSpanMethod="objectSpanMethod" :tableList="tableList"></remixTable>
						</div>
					</div>
					<el-input v-model="analysis" :maxlength="3000" show-word-limit type="textarea" :placeholder="handleType != 'info' ? '请填写说明文' : ''" :autosize="{ minRows: 3 }" :disabled="isReadOnly" />
				</div>
			</el-container>
		</template>

		<template v-if="handleType != 'info'" #footer>
			<el-button class="zs-btn-md zs-btn-primary" @click="doConfirm">提交</el-button>
		</template>
	</el-drawer>
</template>

<script setup>
	import { getCommonDynamicTableDataApi, saveOrUpdateCommonDynamicTableDataApi } from '@/api/SpecialReport/settlementReport';
	import { ref, watch, nextTick } from 'vue';
	import { ElMessage } from 'element-plus';
	import { toThousands } from '@/utils/number-util';
	import remixTable from './remixTable.vue';

	const props = defineProps({
		isShow: { type: Boolean, default: false },
		isReadOnly: { type: Boolean, default: true },
		handleType: { type: String, default: '' },
		currentRow: { type: Object },
		tableHeaderList: { type: Array },
		topRightTxt: { type: String, default: '截止日期' },
		reportName: { type: String, default: '' },
		rowClassName: { type: Function, default: () => () => '', required: false },//table样式
		objectSpanMethod: { type: Function, required: false },//合并单元格
		noFormatColNumList: { type: Array }, //不是输入框的列的索引list
		levelThirdRowList: { type: Array, default: () => [] }, //第三级的行数,暂时只有第三级缩进
	});

	const emit = defineEmits(['close']);
	let isShowDrawer = ref(props.isShow);
	let stopDate = ref('');

	watch(
		() => props.isShow,
		newVal => {
			isShowDrawer.value = newVal;
			nextTick(() => {
				newVal && getInfo();
			});
		},
	);

	let loading = ref(false);
	//数据源
	let tableList = ref([]);
	const getInfo = async () => {
		loading.value = true;
		let res = await getCommonDynamicTableDataApi(props.currentRow.id);
		if (res.data.code != 200) return;
		let result = Object.assign(res.data.data);
		result.tableBody &&
			result.tableBody.forEach((item, index) => {
				item.forEach((child, childIndex) => {
					//第三级的行数,暂时只有第三级缩进
					if (props.levelThirdRowList.includes(index)) {
						child.level = 3
					}
					// noFormatColNumList的列不处理value
					if (props.noFormatColNumList && props.noFormatColNumList.includes(childIndex)) {
						child.isTxt = true;
					} else {
						//去除value中的 ,和 %
						child.value = child.value ? child.value.replace(/,|%/g, '') : '';
					}
					//handleType == 'info'详情时才按千分位分隔
					child.value = props.handleType == 'info' ? (!isNaN(child.value) && child.value != '-' && !child.isTxt ? toThousands(child.value) : child.value) : child.value;
				});
			});
		analysis.value = result.analysis;
		stopDate.value = result.stopDate;
		tableList.value = result.tableBody || [];
		loading.value = false;
	};

	//提交
	const refTable = ref();
	const analysis = ref('');
	const doConfirm = async () => {
		let params = {
			reportDetailId: props.currentRow.id,
			analysis: analysis.value,
			tableBody: refTable.value.getParams(),
			stopDate: stopDate.value,
		};
		console.log(params);
		let res = await saveOrUpdateCommonDynamicTableDataApi(params);
		if (res.data.code == 200) {
			ElMessage({
				message: '提交成功',
				type: 'success',
			});
			isShowDrawer.value = false;
			emit('close', { isShow: false, isRefresh: true });
		}
	};

	//关闭抽屉
	const handleClose = done => {
		emit('close', { isShow: false });
		done();
	};
</script>

<style scoped lang="scss">
	.zs-drawer-content-whole {
		background: #ffffff;
		width: 100%;
		padding: 20px;
		overflow: hidden;
		.top-box {
			border-bottom: 1px solid #f1f1f1;
			padding-bottom: 15px;
		}
		:deep(.report-table) {
			.bg-color-eee2dd {
				--el-table-tr-bg-color: #eee2dd !important;
			}
			.bg-color-eef4fe {
				--el-table-tr-bg-color: #eef4fe !important;
			}
			.el-input.is-disabled .el-input__wrapper {
				--el-table-tr-bg-color: transparent !important;
				background-color: transparent !important;
			}
			.el-input__wrapper {
				.el-input__inner {
					text-align: right !important;
					font-size: 14px;
				}
			}
			.no-shadow-input {
				.el-input__wrapper {
					box-shadow: none !important;
				}
			}
			.el-input-group__append {
				background-color: transparent !important;
				padding: 0 0 0 5px;
				box-shadow: none !important;
				color: #666666;
			}
		}
	}
	.overflow-auto {
		overflow-y: auto !important;
	}
</style>
